.pda-widget-window {
    height: 545.867px;
    width: 311.033px;
    display: none;
    grid-template-rows: 7% 93%;
    justify-self: center;
    align-self: end;
    position: sticky;
    bottom: 10px;
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 6px black;

    & .pw-title-bar {
        display: grid;
        grid-template-columns: 10% 80% 10%;
        grid-template-areas: "empty title x-button";
        place-items: center;
        user-select: none;
        font-size: 30px;
        color: white;
        background: linear-gradient(#95afd0, #4f79b0, #2f496a);

        & .pw-title {
            grid-area: title;
        }

        & .pw-x-button {
            grid-area: x-button;
            height: 100%;
            width: 100%;
            display: grid;
            place-items: center;
            background: linear-gradient(#ff6666, #ff0000, #990000);
        }

        & .pw-x-button:hover {
            background: linear-gradient(#ff9999, #ff3333, #cc0000);
        }

        & .pw-x-button:active {
            background: linear-gradient(#ff3333, #cc0000, #660000);
        }
    }

    & .pw-content-body {

        & .pw-guest-options {
            height: 100%;
            width: 100%;
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: repeat(auto-fit, 15%);
            grid-auto-rows: 15%;
            overflow-y: scroll;

            & ::-webkit-scrollbar {
                display: none;
            }

            scrollbar-width: none;

            & p {
                height: 80%;
                width: 80%;
                display: grid;
                place-items: center;
                place-self: center;
                font-size: 22px;
                color: white;
                background: #00008b;
                border-radius: 10px;
                user-select: none;
            }

            & p:hover {
                background: #3232ac;
                cursor: pointer;
            }

            & p:active {
                background: #030361;
            }
        }

        & .pw-login-form {
            height: 100%;
            width: 100%;
            display: none;
            grid-template-rows: repeat(auto-fit, 6%);

            & p {
                display: grid;
                place-items: center;
                font-size: 22px;
                color: white;
                background: #00008b;
                user-select: none;
            }

            & .pwl-email-input,
            .pwl-password-input {
                width: 90%;
                place-self: center;
            }
        }

        & .pw-recover-form {
            height: 100%;
            width: 100%;
            display: none;
            grid-template-rows: repeat(auto-fit, 6%);

            & p {
                display: grid;
                place-items: center;
                font-size: 22px;
                color: white;
                background: #00008b;
                user-select: none;
            }

            & .pwrec-email-input {
                width: 90%;
                place-self: center;
            }
        }

        & .pw-registration-form {
            height: 100%;
            width: 100%;
            display: none;
            grid-template-rows: repeat(auto-fit, 6%);

            & p {
                display: grid;
                place-items: center;
                font-size: 22px;
                color: white;
                background: #00008b;
                user-select: none;
            }

            & .pwr-email-input,
            .pwr-username-input,
            .pwr-password-input {
                width: 90%;
                place-self: center;
            }
        }

        & .pw-user-options {
            height: 100%;
            width: 100%;
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: repeat(auto-fit, 15%);
            grid-auto-rows: 15%;

            & p, a {
                height: 80%;
                width: 80%;
                display: grid;
                place-items: center;
                place-self: center;
                font-size: 22px;
                color: white;
                background: #00008b;
                border-radius: 10px;
                user-select: none;
            }

            & p:hover, a:hover {
                background: #3232ac;
                cursor: pointer;
            }

            & p:active, a:active {
                background: #030361;
            }

            & a{ text-decoration: none; }
        }

        & .pwu-upload-options{
            height: 100%;
            width: 100%;
            display: none;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: repeat(auto-fit, 15%);
            grid-auto-rows: 15%;

            & p, a {
                height: 80%;
                width: 80%;
                display: grid;
                place-items: center;
                place-self: center;
                font-size: 22px;
                color: white;
                background: #00008b;
                border-radius: 10px;
                user-select: none;
            }

            & p:hover, a:hover {
                background: #3232ac;
                cursor: pointer;
            }

            & p:active, a:active {
                background: #030361;
            }

            & a{ text-decoration: none; }
        }
        
        & .pwu-content-options{
            height: 100%;
            width: 100%;
            display: none;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: repeat(auto-fit, 15%);
            grid-auto-rows: 15%;

            & p {
                height: 80%;
                width: 80%;
                display: grid;
                place-items: center;
                place-self: center;
                font-size: 22px;
                color: white;
                background: #00008b;
                border-radius: 10px;
                user-select: none;
            }

            & p:hover{
                background: #3232ac;
                cursor: pointer;
            }

            & p:active{
                background: #030361;
            }
        }
    }
}